<template>
  <view
    v-if="navList && navList.length > 0"
    class="tabs box-b w100 relative"
    :class="[bgColor, topClass]"
  >
    <view
      v-for="(item, index) in navList"
      :key="item.id"
      class="tabs-item fs28 relative"
      :class="type == index ? [activeName, className] : [className]"
      @click="changeList(index)"
    >
      <view class="fs26 flex" :class="type == index ? [activeName] : ''">
        {{ item.name }}
        <view v-if="showNum">
          {{ '(' + item.orderNum + ')' }}
        </view>
      </view>
      <view v-if="type == index && showLine" :class="lineClass"></view>
    </view>
    <view v-if="showbtmLine" class="absolute line-btn w100 bgc4 radius5 zIndex0"></view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'nav-tabs',
  props: {
    navList: {
      type: Array,
      default() {
        return [];
      },
    },
    type: {
      type: [Number, String],
      default: 0,
    },
    bgColor: {
      type: [Number, String],
      default: 'bgf4 h90 radius45 pd10 box-b',
    },
    className: {
      type: [Number, String],
      default: 'h70 radius35 flex-box flex1',
    },
    activeName: {
      type: [Number, String],
      default: 'bgff color22 ffmy fw600',
    },
    showLine: {
      type: Boolean,
      default: false,
    },
    showbtmLine: {
      type: Boolean,
      default: false,
    },
    changeName: {
      type: String,
      default: 'nav',
    },
    topClass: {
      type: String,
      default: 'flex-box',
    },
    lineClass: {
      type: String,
      default: 'absolute line mgl-50p w100 bg33 zIndex1',
    },
    // 显示数字
    showNum: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    changeList(index) {
      this.$emit('changeList', index, this.changeName);
    },
  },
};
</script>

<style lang="less" scoped>
.tabs {
  .line {
    height: 6rpx;
    border-radius: 6rpx;
    bottom: 0;
    left: 50%;
  }

  .line-btn {
    height: 6rpx;
    border-radius: 6rpx;
    bottom: 0;
    left: 0;
  }
}
</style>
